import {
  View,
  Text,
  Button,
  Swiper,
  SwiperItem,
  Icon,
  Progress,
  Picker,
  Navigator,
  Canvas,
} from "@tarojs/components";
import React, { useEffect, useMemo, useState } from "react";
import Taro, { useLoad } from "@tarojs/taro";
import { Header } from "@/components/header/index";
import { fetchTopics } from "@/services/topics";
import "./index.scss";

export default function Index() {
  const [topics, setTopics] = useState([]);
  useLoad(() => {
    console.log("Page loaded.");
  });

  const handleClick = () => {
    Taro.navigateTo({
      url: "/pages/detail/index?name=heyi",
    });
  };

  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    console.log("🚀 ~ useEffect ~ canvasRef.current:", canvasRef.current);
    const ctx = (
      canvasRef.current.firstChild as HTMLCanvasElement
    )?.getContext?.("2d");
    if (!ctx) return;
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 150, 75);
  }, []);

  // useEffect(() => {
  //   fetchTopics().then((res) => {
  //     setTopics(res.data);
  //   });
  // }, []);

  const text = useMemo(() => {
    const plateform = process.env.TARO_ENV;

    switch (plateform) {
      case "h5": {
        return "H5";
      }
      case "weapp": {
        return "微信小程序";
      }
      default:
        break;
    }
  }, []);

  // #ifdef weapp
  console.log("🚀 ~ file: index.tsx ~ line 47 ~ Index ~ topics", topics);
  // #endif

  return (
    <View className="index">
      <Text>Hello world!</Text>
      <View>{text}</View>
      {process.env.TARO_ENV === "weapp" && <Text>我只在微信小程序显示</Text>}
      {/* #ifdef weapp */}
      <Text>我只在微信小程序显示</Text>
      <Header />
      {/* #endif */}
      <View>
        {topics.map((item) => (
          <View key={item.id} className="topic">
            <Text>{item.title}</Text>
          </View>
        ))}
      </View>
      {/* <ListView
        items={topics}
        renderRow={(item) => (
          <View key={item.id} className="topic">
            <Text>{item.title}</Text>
          </View>
        )}
      /> */}
      <Swiper
        className="test-h"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        vertical
        circular
        indicatorDots
        autoplay
      >
        <SwiperItem>
          <View className="demo-text-1">1</View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-2">2</View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-3">3</View>
        </SwiperItem>
      </Swiper>
      <View className="components-page">
        <Icon type="success" />
        <Icon type="info" />
        <Icon type="warn" color="#ccc" />
        <Icon type="warn" />
        <Icon type="waiting" />
        <Icon type="success_no_circle" />
        <Icon type="warn" />
        <Icon type="success" />
        <Icon type="download" />
        <Icon type="clear" color="red" />
        <Icon type="search" />
      </View>
      <View className="components-page">
        <Progress percent={20} showInfo strokeWidth={2} />
        <Progress percent={40} strokeWidth={2} active />
        <Progress percent={60} strokeWidth={2} active />
        <Progress percent={80} strokeWidth={2} active activeColor="blue" />
      </View>
      <Navigator url="/pages/detail/index">跳转到详情页</Navigator>
      <Picker mode="time" onChange={(ev) => console.log(ev)}>
        <Button>选择时间</Button>
      </Picker>
      <Canvas
        ref={canvasRef}
        style="width: 300px; height: 200px;"
        canvasId="canvas"
      />
      <Button type="primary" onClick={handleClick}>
        按钮
      </Button>
      <Button onClick={handleClick}>按钮</Button>
      <Button type="warn" onClick={handleClick}>
        警告按钮
      </Button>
    </View>
  );
}
